<template>
  <div class="task-list flex flex-wrap justify-between content-start">
    <div class="item bg-white flex mb-16px" v-for="i in list" :key="i.id">
      <div class="color-bar h-full"></div>
      <div class="flex-1 px-14px box-border flex flex-col relative">
        <span class="unread absolute bg-FF4040" v-show="i.unread"></span>
        <div class="header py-14px box-border flex items-center">
          <img class="icon-teacher" src="static/icons/icon-zylb-jiaoshihead@2x.png" mode="" />
          <div class="detail flex-1 flex flex-col pl-8px">
            <div class="name font-medium text-333"> 打卡-{{ i.teacherName }} 老师 </div>
            <div class="time text-9CADBB mt-6px">
              {{ $utils.parseTime(i.createTime) }}
            </div>
          </div>
          <div
            class="status px-14px flex items-center text-FF9B21 bg-FF9B21-10"
            v-show="i.status != 2"
          >
            今日未打卡
          </div>
          <div
            class="status px-14px flex items-center text-30C9A1 bg-30C9A1-10"
            v-show="i.status == 2"
          >
            今日已打卡
          </div>
        </div>
        <div class="content flex-1 py-14px box-border relative">
          <div class="row">
            <span class="text-A3A3A3">打卡科目：</span
            ><span class="text-333 ellipsis">{{ i.subjectId | subjectName(subjectDict) }}</span>
          </div>
          <div class="row">
            <span class="text-A3A3A3">打卡标题：</span
            ><span class="text-333 ellipsis">{{ i.title }}</span>
          </div>
          <div class="row">
            <span class="text-A3A3A3">发布范围：</span
            ><span class="text-333 ellipsis">{{ i | studentsRange }}</span>
          </div>
          <div class="row">
            <span class="text-A3A3A3">打卡类型：</span
            ><span class="text-333 ellipsis">
              <span v-if="i.type == 1">举一反三</span>
              <span v-else-if="i.type == 2">习题中心</span>
              <span v-else>未知类型</span>
            </span>
          </div>
          <div class="row">
            <span class="text-A3A3A3">知识点：</span
            ><span class="text-333 ellipsis">{{ i.kpointNames }}</span>
          </div>
          <div class="row">
            <span class="text-A3A3A3">练习时长：</span
            ><span class="text-333 ellipsis"
              >{{ parseInt(i.requiredQuestionDuration / 60) }}分钟</span
            >
          </div>
          <div class="row">
            <span class="text-A3A3A3">练习数量：</span
            ><span class="text-333 ellipsis">{{ i | practiceCount }}</span>
          </div>
          <div class="row" v-show="i.endTime">
            <span class="text-A3A3A3">有效期：</span
            ><span class="text-333 ellipsis" style="text-overflow: inherit; white-space: inherit">{{
              i | timeRange
            }}</span>
          </div>
          <div class="row">
            <span class="text-A3A3A3">打卡任务周期：</span
            ><span class="text-333 ellipsis">{{ i.week }}</span>
          </div>
          <div class="btn absolute text-white bg-51C3FF px-22px flex items-center" @click="todo(i)">
            <span>去打卡</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  filters: {
    subjectName: function (id, dict) {
      if (!Array.isArray(dict)) {
        return ''
      }

      return dict.find((s) => s.value === id).label
    },
    timeRange: function (item) {
      const { startTime, endTime } = item
      return `${startTime} ~ ${endTime}`
    },
    studentsRange: function (item) {
      const { studentNames = [] } = item

      try {
        if (studentNames.length <= 3) {
          return `${studentNames.join(',')}等${studentNames.length}名同学`
        } else {
          return `${studentNames[0]},${studentNames[1]},${studentNames[2]}等${studentNames.length}名同学`
        }
      } catch (error) {
        return ''
      }
    },
    practiceCount: function (item) {
      const { requiredQoNum, requiredQsNum, requiredQuestionNum } = item

      try {
        let practiceCountText = `${requiredQuestionNum}道（${
          requiredQoNum && requiredQoNum > 0 ? `客观题${requiredQoNum}道` : ''
        }，${requiredQsNum && requiredQsNum > 0 ? `主观题${requiredQsNum}道` : ''}）`
        return practiceCountText.replace('（，）', '').replace('（，', '（')
      } catch (error) {
        return ''
      }
    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      subjectDict: null
    }
  },
  async created() {
    this.subjectDict = await this.getDictByType('subject')
  },
  methods: {
    ...mapActions(['getDictByType']),
    todo(item) {
      this.$emit('todo', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.task-list {
  .item {
    width: 612px;
    height: 480px;
    border-radius: 16px;
    overflow: hidden;

    .color-bar {
      width: 6px;
      background: linear-gradient(180deg, #51c3ff 0%, #a2ffc6 100%);
    }

    .unread {
      width: 12px;
      height: 12px;
      border-radius: 12px;
      top: 3px;
      right: 3px;
    }

    .header {
      height: 84px;
      border-bottom: 1px solid #f0f0f0;

      .icon-teacher {
        width: 56px;
        height: 56px;
      }

      .detail {
        align-content: center;

        .name {
          font-size: 22px;
          line-height: 28px;
          text-wrap: nowrap;
          text-overflow: ellipsis;
          width: 228px;
          overflow: hidden;
        }

        .time {
          font-size: 16px;
          line-height: 16px;
        }
      }

      .status {
        height: 28px;
        font-size: 16px;
        border-radius: 14px;
      }
    }

    .content {
      .row {
        font-size: 20px;
        line-height: 28px;
        display: flex;

        span:first-child {
          width: 100px;
        }

        .ellipsis {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 476px;
          display: block;
        }

        &:not(:last-child) {
          margin-bottom: 8px;
        }
      }

      .row:nth-child(5) {
        span:first-child {
          width: 80px;
        }

        .ellipsis {
          width: 496px;
        }
      }

      .row:nth-child(8) {
        span:first-child {
          width: 80px;
        }

        .ellipsis {
          width: 496px;
        }
      }

      .row:nth-child(9) {
        span:first-child {
          width: 140px;
        }

        .ellipsis {
          width: 436px;
        }
      }

      .btn {
        height: 40px;
        bottom: 14px;
        right: 0;
        font-size: 18px;
        border-radius: 30px;
        cursor: pointer;
      }
    }
  }
}
</style>
